<template>
	<view class="container backfff height100vh">
		<view class="cell">
			<view class="li1 iptbox">
				<view>手机号：</view>
				<input class="inp boxsibb wid100bai" v-model="mobile" type="number" value="" placeholder="请输入手机号"
					:adjust-position="false" />
			</view>
			<view class="li iptbox">
				<view>验证码：</view>
				<view class="flexaicen padto10">
					<input class="inp boxsibb wid100bai" type="number" v-model="code" value="" placeholder="请输入验证码" />
					<text class="time colo75CECC textcen" @click="send" v-if="!show">获取验证码</text>
					<text class="time colo75CECC textcen" v-if="show">{{num}}s</text>
				</view>
			</view>
		</view>
		<view class="btn" @click="logins()">
			登录
		</view>
	</view>
</template>

<script>
	import {
		captcha,
		login
	} from '@/request/api.js'
	import utils from '@/public/utils.js'
	export default {
		data() {
			return {
				check: false,
				show: false,
				mobile: '',
				code: '',
				num: 60,
				timeout: null,
			};
		},
		onLoad() {
			// this.$nextTick(()=>{
			// 	this.$refs.app_update.update();
			// })
		},
		mounted() {

		},
		onUnload() {
			clearInterval(this.timeout)
		},
		methods: {
			logins() {
				uni.showLoading({
					title: '加载中'
				})
				// 港澳台大陆手机号校验
				let phoneCheck = /^[1][3-9]\d{9}$|^([4|5|6|7|8|9])\d{7}$|^[0][9]\d{8}$|^[6]([8|6])\d{5}$/;
				if (phoneCheck.test(this.mobile) && this.code) {
					login({
						username: this.mobile,
						code: this.code
					}).then((res) => {
						console.log(res)
						if (res.reCode == 200) {
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('username', this.mobile);
							if (!res.data.isIdCard) {
								uni.reLaunch({
									url: '/loginabout/authentication/before'
								})
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						} else {
							utils.toast(res.reMsg)
						}
					})
				} else {
					this.$u.toast('请输入正确的手机号或验证码');
				}

			},
			send() {
				let phoneCheck = /^[1][3-9]\d{9}$|^([4|5|6|7|8|9])\d{7}$|^[0][9]\d{8}$|^[6]([8|6])\d{5}$/;
				if (!phoneCheck.test(this.mobile)) {
					return this.$u.toast('请输入正确的手机号');
				}
				captcha({
					username: this.mobile,
					type: '1'
				}).then((res) => {
					if (res.reCode == 200) {
						this.show = true
						this.timeout = setInterval(() => {
							this.num--;
							if (this.num <= 0) {
								this.show = false
								this.num = 60
								clearInterval(this.timeout)
							}
						}, 1000)
					} else {
						utils.toast(res.reMsg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: vw(200);
		padding-right: vw(40);
		padding-left: vw(40);

		.cell {
			.iptbox {
				height: vw(110);
				font-size: vw(29);

				.inp {
					font-size: vw(42);
					font-size: vw(29);
					border: vw(1) solid rgba(221, 221, 221, 1);
					height: vw(80);
					padding-left: vw(20);
					border-radius: vw(10);
				}
			}

			.li1 .inp {
				margin-top: vw(20);
			}

			.li {
				margin-top: vw(60);

				.time {
					width: vw(220);
					font-size: vw(26);
					margin-left: vw(20);
					height: vw(80);
					line-height: vw(80);
					background-color: rgba(117, 206, 204, 0.1);
				}
			}
		}

		.tip {
			margin-top: vw(60);
			font-size: vw(25);
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: rgba(119, 119, 119, 1);
		}

		.btn {
			width: vw(674);
			height: vw(76);
			background: #75CECC;
			border-radius: vw(5);
			text-align: center;
			line-height: vw(76);
			font-size: vw(29);
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: rgba(255, 255, 255, 1);
			margin: auto;
			margin-top: vw(100);
		}

		.change {
			width: 100%;
			text-align: center;
			font-size: vw(26);
			color: #75CECC;
			margin-top: vw(40);
		}
	}

	/deep/ .uni-checkbox-input {
		border-radius: 50%;
	}

	/deep/ .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 40upx;
		color: #75CECC
	}

	/deep/ .uni-checkbox-input:hover {
		border-color: #75CECC;
	}

	/deep/ .uni-checkbox-input {
		color: #75CECC;
	}
</style>